<template>
  <div class="app-container">
    <el-card class="box-card" >
      <div slot="header" class="clearfix">
        <span class="el-icon-document">表单信息</span>
      </div>
      <el-col :span="16" :offset="4">
        <el-row>
          <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef"></v-form-render>
        </el-row>
      </el-col>
    </el-card>
    <el-card class="box-card" >
      <div slot="header" class="clearfix">
        <span class="el-icon-document">审批记录</span>
      </div>
      <el-col :span="16" :offset="4" v-if="flowRecordList" >
        <task-record :flowRecordList.sync="flowRecordList"></task-record>
      </el-col>
    </el-card>
    <el-card class="box-card" >
      <div slot="header" class="clearfix">
        <span class="el-icon-document">流程图</span>
      </div>
      <div v-if="xmlData" >
        <flow-view :xmlData.sync="xmlData" :taskList.sync="taskList"></flow-view>
      </div>
    </el-card>
  </div>
</template>
<script>

import FlowView from '../bpmn/FlowView';
import TaskRecord from '../task/taskRecord';
import {taskRecord} from "@/api/flowable/task";
import {getDataByInstId} from "@/api/flowable/front";

export default {
  name: "InstDetail",
  components:{FlowView,TaskRecord},
  data() {
    return {
      // 遮罩层
      loading: true,
      taskId: '',
      deployId: this.$route.query.deployId,
      procInstId: this.$route.query.procInstId,
      //表单
      formJson: {},
      formData: {},
      optionData: {},
      //流程图
      xmlData:'',
      taskList: {},
      flowRecordList:[],
    }
  },
  mounted(){
    this.getDataByInstId();
  },
  methods:{
    /** 返回页面 */
    goBack() {
      // 关闭当前标签页并返回上个页面
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.go(-1)
    },
    async getDataByInstId(){
      let res1 = await taskRecord(this.procInstId);
      let info = await getDataByInstId(this.procInstId);
      let appVersion = info.data.appVersion;
      let formVersion = info.data.formVersion;
      let formData = info.data.formData;
      this.flowRecordList = res1.data.flowList;
      this.taskList = res1.data.elementList;
      this.xmlData = appVersion.bpmnXml;


      this.$refs.vFormRef.setFormJson(formVersion.formContent)
      this.$nextTick(() => {
        this.$refs.vFormRef.setFormData(JSON.parse(formData.submitData));
        this.$nextTick(() => {
          this.$refs.vFormRef.disableForm();
        })
      })
    },
  }
}
</script>
<style scoped>
.box-card{
  margin-bottom: 10px;
  width:87vw
}
.box-button{
  display: flex;
  justify-content: flex-end;
  padding-bottom: 10px;
}
</style>
